<template>
  <div class="top7Body">
    <div
      class="hot1"
    >
      <div class="hot2">
        <div class="hot3">
          <span class="hot4">正在热映</span>
          <span
           class="hot5"
            >TOP7</span
          >
        </div>
        <div class="hot6">
          <el-card class="box-card">
            <div v-for="(o, index) in 7" :key="o" class="text item">
              <div class="hot7">
                <div class="hot8"></div>
                <div
                 class="hot9"
                >
                  <span class="hot10">
                    {{ index + 1 }}
                  </span>
                </div>
                <div
                 class="hot11"
                >
                  <span class="hot12"> {{ topNames[index] }} </span>
                  <span class="hot13"> {{ topRates[index] }} 分</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div
      class="hot14"
    >
      <div class="demo-image">
        <el-image
          class="hot15"
          :src="imag1"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
const imag1 = require('@/assets/tj2.jpg')
const tableAll = ref()
const topNames = ref([])
const topRates = ref([])
const topCnt = ref(0)
onMounted(() => {
  axios.get('/api/movie/getMovieByMstate/正在热映').then((res) => {
    tableAll.value = res.data
    topCnt.value = tableAll.value.length > 7 ? 7 : tableAll.value.length
    for (let i = 0; i < topCnt.value; i = i + 1) {
      topNames.value.push(tableAll.value[i].mname)
      topRates.value.push(tableAll.value[i].rate)
    }
  })
})
</script>
<style lang="scss" scoped>
.top7Body {
  width: 30%;
  height: 850px;
  background-color: white;
  display: flex;
  float: right;
  margin-top: -1420px;
}
.hot1{
        display: flex;
        float: right;
        width: 30%;
        background-color: black;
        height: 475px;
        margin-top: 0px;
}
.hot2{
  background-color: white; height: 475px; width: 285px
}
.hot3{
  background-color: white; height: 45px; width: 385px
}
.hot4{
  font-size: x-large; display: flex; float: left
}
.hot5{
              font-size: large;
              display: flex;
              float: left;
              color: orange;
              margin-top: 10px;
              margin-left: 20px;
}
.hot6{
  background-color: white; height: 405px; width: 405px
}
.box-card{
  background-color: white; width: 100%
}
.hot7{
  width: 100%; height: 50px; background-color: white
}
.hot8{
  width: 25px; height: 12px; background-color: white
}
.hot9{
  width: 25px; height: 25px; background-color: #42b983; text-align: center
}
.hot10{
  color: white
}
.hot11{
  margin-top: -25px;
  margin-left: 35px;
  background-color: white;
  text-align: left;
  width: 300px;
}
.hot12{
  margin-left: 5px
}
.hot13{
  color: orange; margin-left: 10px
}
.hot14{
        display: flex;
        float: right;
        width: 30%;
        background-color: white;
        height: 475px;
        margin-left: -100px;
        margin-top: 530px;
}
.hot15{
  width: 365px; height: 355px; margin-top: 0px; margin-left: 0px
}
</style>
